<template>
  <!-- 全局插件 navbar -->
  <div class="navbar">
    <van-nav-bar>
      <template #left>
        <i class="iconfont iconbtn_nav_back myarrow05" @click="back"></i>
      </template>
      <template #title>
        <h3>{{ title }}</h3>
      </template>
      <template #right>
        <van-icon @click="more" class="more" name="ellipsis" v-if="needMore" />
        <span class="save" @click="save" v-else-if="needSave">保存</span>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'navbar',
  props: ['title', 'needMore', 'needSave'],
  methods: {
    back () {
      this.$emit('back')
    },
    save () {
      this.$emit('save')
    },
    more () {
      this.$emit('more')
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  /deep/ .van-nav-bar {
    background-color: #3296fa;
    .van-nav-bar__left {
      padding-left: 5px;
      text-align: left;
    }
    h3 {
      color: #fff;
      font-weight: 400;
    }
    .myarrow05 {
      font-size: 40px;
      color: #fff;
    }
    .more {
      font-size: 24px;
      color: #fff;
    }
    .save {
      font-size: 16px;
      color: #fff;
    }
  }
}
</style>
